import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.component.html',
  styleUrls: [
    './bootstrap.min.css',
    './style.css',
    './responsive.css',
    './component.css',
  ]
})
export class HomeComponent {
  /* private morphSearch!: HTMLElement;
  private input!: HTMLInputElement;
  private ctrlClose!: HTMLElement;
  private isOpen = false;
  private isAnimating = false;
  private toggleSearchBound!: (evt: Event) => void;

  ngOnInit(): void {
    this.morphSearch = document.getElementById('morphsearch') as HTMLElement;
    this.input = this.morphSearch.querySelector('input.morphsearch-input') as HTMLInputElement;
    this.ctrlClose = this.morphSearch.querySelector('span.morphsearch-close') as HTMLElement;

    this.toggleSearchBound = this.toggleSearch.bind(this);

    if (this.morphSearch && this.input && this.ctrlClose) {
      this.input.addEventListener('focus', this.toggleSearchBound);
      this.ctrlClose.addEventListener('click', this.toggleSearchBound);
      document.addEventListener('keydown', this.handleKeyDown.bind(this));
      this.preventFormSubmit();
    } else {
      console.error('One or more elements not found');
    }
  }

  ngOnDestroy(): void {
    if (this.morphSearch && this.input && this.ctrlClose) {
      this.input.removeEventListener('focus', this.toggleSearchBound);
      this.ctrlClose.removeEventListener('click', this.toggleSearchBound);
      document.removeEventListener('keydown', this.handleKeyDown.bind(this));
    }
  }

  private toggleSearch(evt: Event): void {
    if (evt.type.toLowerCase() === 'focus' && this.isOpen) return;

    const offsets = this.morphSearch.getBoundingClientRect();
    if (this.isOpen) {
      this.morphSearch.classList.remove('open');

      if (this.input.value !== '') {
        setTimeout(() => {
          this.morphSearch.classList.add('hideInput');
          setTimeout(() => {
            this.morphSearch.classList.remove('hideInput');
            this.input.value = '';
          }, 300);
        }, 500);
      }

      this.input.blur();
    } else {
      this.morphSearch.classList.add('open');
    }

    this.isOpen = !this.isOpen;
  }

  private handleKeyDown(ev: KeyboardEvent): void {
    const key = ev.key || ev.keyCode || ev.which;
    if (key === 'Escape' && this.isOpen) {
      this.toggleSearch(ev);
    }
  }


  private preventFormSubmit(): void {
    const submitButton = this.morphSearch.querySelector('button[type="submit"]');
    if (submitButton) {
      submitButton.addEventListener('click', (ev: Event) => ev.preventDefault());
    }
  }
 */

}
